<template>
  <div class="report-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        v-for="item in list"
        :key="item.id"
        :title="item.reportNumber"
        :label="`检查时间：${item.checkTime}`"
        is-link
        @click="goToDetail(item.id)"
      >
        <template #value>
          <span>{{ item.patientName }}</span>
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)

const onLoad = async () => {
  try {
    loading.value = true
    const queryParams = new URLSearchParams({
      ...route.query,
      page: page.value
    })
    
    const res = await fetch(`/api/keqiao/reports?${queryParams}`)
    const data = await res.json()
    
    list.value.push(...data.items)
    page.value++
    
    if (data.items.length < 20) {
      finished.value = true
    }
  } catch (error) {
    console.error(error)
  } finally {
    loading.value = false
  }
}

const goToDetail = (id) => {
  router.push(`/keqiao/detail/${id}`)
}
</script> 